<template>
  <div id="app">
    <router-view class="page"></router-view>
    <van-tabbar v-if="footershow" v-model="active" route>
      <van-tabbar-item class="zi" :to="{name:'Home'}">
        <img slot="icon" slot-scope="props" :src="props.active ? ic : icn">首页
      </van-tabbar-item>
      <van-tabbar-item class="zi" :to="{name:'User'}" :change="footer_hidden()">
        <img slot="icon" slot-scope="props" :src="props.active ? icc : icnn">我的
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
// https://backhu.bigchun.com // development
// https://huboshi-back.bigchun.com // production
import ic from "./assets/icon/首页选中.png";
import icn from "./assets/icon/首页未选中.png";
import icc from "./assets/icon/我的选中.png";
import icnn from "./assets/icon/我的未选中.png";
export default {
  data() {
    return {
      active: 0,
      ic: ic,
      icn: icn,
      icc: icc,
      icnn: icnn,
      footershow: true
    };
  },
  watch: {
    // 监听路由变化
    $route(to, from) {
      let ThisPage = to.name;
      document.title = to.meta.title;
      if (
        ThisPage == "search" ||
        ThisPage == "userbang" ||
        ThisPage == "problem" ||
        ThisPage == "userfei" ||
        ThisPage == "userCenter" ||
        ThisPage == "useryou" ||
        ThisPage == "userji" ||
        ThisPage == "kecheng" ||
        ThisPage == "kechengy" ||
        ThisPage == "shouyin" ||
        ThisPage == "lgou" ||
        ThisPage == "shike" ||
        ThisPage == "yinke" ||
        ThisPage == "userMessage"
      ) {
        this.footershow = false;
      } else {
        this.footershow = true;
      }
    }
  },
  async mounted() {
    let ThisPage = this.$route.name;
    document.title = this.$route.meta.title;
    if (
      ThisPage == "search" ||
      ThisPage == "userbang" ||
      ThisPage == "problem" ||
      ThisPage == "userfei" ||
      ThisPage == "userCenter" ||
      ThisPage == "useryou" ||
      ThisPage == "userji" ||
      ThisPage == "kecheng" ||
      ThisPage == "kechengy" ||
      ThisPage == "shouyin" ||
      ThisPage == "lgou" ||
      ThisPage == "shike" ||
      ThisPage == "yinke" ||
      ThisPage == "userMessage"
    ) {
      this.footershow = false;
    } else {
      this.footershow = true;
    }
  },
  methods: {
    footer_hidden() {
      this.footershow = true;
    }
    //是否显示底部
    //footer (bool) {
    //this.footer_show = bool;
    //}
  }
};
</script>
<style>
.zi {
  color: #212121;
}
.page {
  padding-bottom: 50px !important;
}
#app {
  background: #fff;
  width: 100%;
  overflow: scroll;
  height: 100vh;
}
.van-tabbar-item__icon img {
  width: 20px;
}
</style>
